<template>
  <div>
    <div class="type">
      <div><span>全城</span><span class="drop"></span></div>
      <div><span>品牌</span><span class="drop"></span></div>
      <div><span>特色</span><span class="drop"></span></div>
    </div>
    <movielist :movielist="movieli"></movielist>
  </div>
</template>

<script>
import axios from 'axios';
import movielist from '../../components/cinema/movielist.vue';
export default {
  components: { movielist },
  name: "cinema",
  data: function () {
    return {
      movieli: "",
    }
  },
  mounted () {
    var date = new Date
    date.setTime(date.getTime())
    var date1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    console.log(date1)
    axios.get("/ajax/moreCinemas?day=" + date1 + "&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1625139514987&cityId=57&optimus_uuid=A1411130C83511EBB4C89D9CE0590754D99726EE43F74ACFAB86D17B35714FDA&optimus_risk_level=71&optimus_code=10")
      .then((res) => {
        this.movieli = res.data
      })
  }
};

</script>

<style scoped>
.type {
  display: flex;
  justify-content: space-around;
  position: fixed;
  z-index: 2;
  background: #fff;
  border-top: 1px solid #ccc;
}
.type > div {
  width: 125px;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.type > div::before {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: 0;
  border-left: 1px solid #e8e8e8;
}
.type > div > span:first-of-type {
  font-size: 13px;
  color: #777;
}
.drop {
  display: inline-block;
  position: absolute;
  top: 18px;
  width: 0;
  height: 0;
  margin-left: 4px;
  border: 4px solid rgba(0, 0, 0, 0);
  border-top-color: #b0b0b0;
}
</style>